<!DOCTYPE html>
<html lang="es">

<head>
  <title>DevJobs - Inicio</title>
  <meta charset="UTF-8" />
  <meta name="description" content="Encuentra las mejores ofertas de trabajo para desarrolladores en DevJobs.">

  <link rel="stylesheet" href="./styles.css" />
</head>

<body>
  <header>
    <h1>
      <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <polyline points="16 18 22 12 16 6"></polyline>
        <polyline points="8 6 2 12 8 18"></polyline>
      </svg>
      DevJobs
    </h1>

    <nav>
      <!-- <a href="">
        Inicio
      </a> -->
      <a href="empleos.html">Empleos</a>
    </nav>

    <div>
      <a href="">Publicar un empleo</a>
      <!-- <a href="">Iniciar sesión</a> -->
    </div>
  </header>

  <main>
    <section>
      <img src="./background.webp" width="200" />

      <h1>Encuentra el trabajo de tus sueños</h1>

      <p>Únete a la comunidad más grande de desarrolladores y encuentra tu próxima oportunidad.</p>

      <form role="search">
        <div>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
            class="icon icon-tabler icons-tabler-outline icon-tabler-search">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
            <path d="M21 21l-6 -6" />
          </svg>

          <input required type="text" placeholder="Buscar empleos por título, habilidad o empresa">

          <button disabled type="submit">Buscar</button>
        </div>
      </form>
    </section>

    <section>

      <header>
        <h2>¿Por qué DevJobs?</h2>
        <p>DevJobs es la principal plataforma de búsqueda de empleo para desarrolladores. Conectamos a los mejores
          talentos con las empresas más innovadoras.</p>
      </header>

      <footer>
        <article>
          <svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true">
            <path
              d="M216,56H176V48a24,24,0,0,0-24-24H104A24,24,0,0,0,80,48v8H40A16,16,0,0,0,24,72V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V72A16,16,0,0,0,216,56ZM96,48a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96ZM216,72v41.61A184,184,0,0,1,128,136a184.07,184.07,0,0,1-88-22.38V72Zm0,128H40V131.64A200.19,200.19,0,0,0,128,152a200.25,200.25,0,0,0,88-20.37V200ZM104,112a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H112A8,8,0,0,1,104,112Z">
            </path>
          </svg>
          <h3>Encuentra el trabajo de tus sueños</h3>
          <p>Busca miles de empleos de las mejores empresas de todo el mundo.</p>
        </article>

        <article>
          <svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true">
            <path
              d="M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z">
            </path>
          </svg>
          <h3>Conecta con las mejores empresas</h3>
          <p>Conecta con empresas que están contratando por tus habilidades.</p>
        </article>

        <article>
          <svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true">
            <path
              d="M240,208H224V96a16,16,0,0,0-16-16H144V32a16,16,0,0,0-24.88-13.32L39.12,72A16,16,0,0,0,32,85.34V208H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM208,96V208H144V96ZM48,85.34,128,32V208H48ZM112,112v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm-32,0v16a8,8,0,0,1-16,0V112a8,8,0,1,1,16,0Zm0,56v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Zm32,0v16a8,8,0,0,1-16,0V168a8,8,0,0,1,16,0Z">
            </path>
          </svg>
          <h3>Obtén el salario que mereces</h3>
          <p>Obtén el salario que mereces con nuestra calculadora de salarios.</p>
        </article>
      </footer>

    </section>
  </main>

  <footer>
    <small>&copy; 2025 DevJobs. Todos los derechos reservados.</small>
  </footer>

</body>

</html>